<template>
	<view class="content">
		<view class="aha">
			<view class="flex">
				<p class="shiY">鑫泰运石油</p>
				<p><image src="../../static/c2.jpg" mode="" style="width: 260rpx;height: 150rpx;"></image> </p>
			</view>
			
			<view class="">
				<p class="bottom">三里庄路3号</p>
				<view class="flex">
					<p class="bottom">距2.60千米</p>
					<p>距离</p>
				</view>
			</view>
				<view class="flex">
					<span class="qian1">
						<span><image src="../../static/time.png" mode=""></image> </span>24小时营业</span>
						<span class="qian1"><span><image src="../../static/fapiao.png" mode=""></image> </span>油站开票</span>
						<span class="jia">油品质量好 服务好<span><image src="../../static/wenhao4.png" mode=""></image> </span></span>
				</view>
		</view>
		<view class="flex1">
			<view class="xuanX" v-for="(item,index) in list1" :key="index" >
				<view class="daX"><view class="lia" @click="checkIndex(index)" :class="navIndex==index ? 'activite2' : ''">{{item.name}}</view></view>
			</view>
		</view>
			<view class="left_Left" v-if="navIndex==0">
				<p class="choose">请选择油枪 | 枪号</p>
				<view class="flex">
					<view class="valu flex">
						<p>95#</p>
						<p> <image src="../../static/xiala.png" mode="" style="width: 50rpx;height: 50rpx;"></image></p>
					</view>
					
					<view class="number">
						<span class="money">￥6.88 <span class="Rl">/L</span></span>
					</view>
					<view class="right1">
						<p>油站价￥8.17/L</p>
						<p>国际价￥8.17/L</p>
					</view>
				</view>
				<view class="qiangH">
					<p>请选择枪号</p>
					<view class="valu1 flex">
						<p>95#</p>
						<p> <image src="../../static/xiala.png" mode="" style="width: 50rpx;height: 50rpx;"></image></p>
					</view>
				</view>
				<view class="shuR">
					<p>请输入金额</p>
					<view class="flex"><p><input type="text" placeholder="￥请输入油机金额"/></p><p><button>0.00</button></p></view>
				</view>
				<view class=" flex">
					<view class="three" v-for="(item,index) in list2" :key="index">
						<view class="z1">
							<p class="p6">{{item.text}}</p>
							<p class="p6">{{item.text2}}</p>
						</view>
					</view>
				</view>
				
			</view>
			
			
			<view class="right_Right" v-if="navIndex==1">
				<p class="choose">油站保障</p>
				<view class="over">
					<view class="card"><image src="../../static/id card.png" mode="" style="width: 50rpx;height: 50rpx;"></image> </view>
					<view class="two2">
						<p>营业资质</p>
						<p>查看营业资质详情</p>
					</view>
				</view>
				
				<view class="flex">
					<p>车友印象</p>
					<p><image src="../../static/shenglueH.png" mode="" style="width: 50rpx;height: 50rpx;"></image></p>
				</view>
				<view class="button2" v-for="(item,index) in list3">
					<view class="wen1">
						<p class="p_text">{{item.text}}</p>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navIndex: 0,
				list1:[
					{
					name:'立即加油'
				},
				{
					name:'油站详情'
				}
				],
				list2:[
					{text:'￥200',text2:'可优惠￥28.78'},
					{text:'￥300',text2:'可优惠￥22.61'},
					{text:'￥400',text2:'可优惠￥21.61'},
				],
				list3:[
					{text:'服务态度好（7）'},
					{text:'油品质量高（7）'},
					{text:'油价便宜（4）'},
					{text:'环境干净整洁（4）'},
					{text:'服务态度一般（4）'},
				]
			}
		},
		methods:{
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
		}
	}
</script>

<style>
	.content{width: 90%;margin: 0 auto;}
	.shiY{font-size: 60rpx; font-weight: bold;}
	.flex{display: flex;justify-content: space-between;margin: 20rpx 0;}
	.flex1{display: flex;justify-content: space-around;margin: 20rpx 0;}
	.jia{color: #ccc;font-size:25rpx;padding-left: 20px;}
	.qian{overflow: hidden;padding-top: 20px;}
	.left{float: left;}
	.you{float: right;}
	.wanD{font-size: 30rpx;background-color: chocolate;border-radius: 5px;padding: 0 10px;}
	.aha{margin-top: 5px;padding: 10px;background-color: #fff;border-radius: 15px;width: 90%;margin: 0 auto;}
	.xuanX button{border-radius: 25px;border: #ccc 1px solid;font-size: 25rpx;width: 100%;}
	.qian1 image{width: 25rpx;height: 25rpx;}
	.qian1{font-size: 25rpx;}
	.jia image{width: 25rpx;height: 25rpx;}
	.activite2{border-bottom: #f00 5px solid;width: 40%;}
	.xuanX{display: flex;justify-content: space-between;}
	.lia{font-size: 50rpx;width: 100%;line-height: 100rpx;}
	.left_Left{margin: 20px 0;}
	.choose{font-size: 35rpx;}
	.card{width: 80rpx;height: 80rpx;background-color: #999;border-radius: 80rpx;text-align: center;float: left;}
	.card image{margin-top: 15rpx;}
	.valu{border: #999 1px solid;width: 20%;border-radius: 15rpx;}
	.money{color: #f00;font-size: 60rpx;}
	.Rl{color: #f00;font-size: 30rpx;}
	.right1 p{color: #ccc;}
	.valu1{border: #999 1px solid;width: 100%;border-radius: 15rpx;}
	.shuR input{border: #999 1px solid;border-radius: 15rpx;}
	.three{background-color: #999;width: 30%;}
	.p6{color: #f00;text-align: center;font-size: 20rpx;line-height: 50rpx;}
	.over{overflow: hidden;}
	.two2{float: left;}
	.p_text{background-color: #ccc;padding: 20rpx;width: 25 %;font-size:20rpx;}
</style>